<template>
	<view>
		<!-- 登录页面图片 -->
		<image src="/src/static/loginPic.jpg" style="width: 100%;height:700rpx;" mode=""></image>
		<!-- 下面的ui -->
		<view class="down">
			<view class="" style="padding: 90rpx;">
				<!-- 开头文字 -->
				<text class="flex justify-center" style="font-size: 50rpx; font-weight: 500;color: #1B3125;">开启及游册</text>
				<!-- 灰色背景文字 -->
				<view class="flex justify-center align-center" style="background-color: #ECF2F0; height: 80rpx; border-radius: 30rpx;margin-top: 40rpx;">
					<text style="color: #495C52;">“拥有属于自己的旅行书”</text>
				</view>
				<!-- 移动提供服务字体ui -->
				<view class="flex justify-center align-center" style="flex-direction: column; margin-top: 70rpx;">
					<text style="font-size: 40rpx; color: #586B60;">移动不返回掩码</text>
					<text style="font-size: 21rpx;color: #B4BFB9; margin-top: 5rpx;">中国移动提供认证服务</text>
				</view>
				<!-- 手机号一键登录按钮 -->
				<view class="flex justify-center" style="margin-top: 50rpx;">
					<button class="btn flex justify-center align-center" @click="fastLogin">手机号一键登录</button>
				</view>
				<!-- 其他方式登录 -->
				<view class="flex justify-center" style="margin-top: 70rpx; color: #8C9990;">
					<text @click="otherLogin">使用其他方式登录</text>
				</view>
				<!-- 下面小字 -->
				<view class="flex justify-center" style="margin-top: 200rpx; color: #D4DED9;">
					<text style="font-size: 20rpx;">xxxxxxx提供服务</text>
				</view>
			</view>
		</view>
	</view>

<!-- 模态框 -->
<uni-popup ref="popup" type="center">
  <view class="box">
	  <!-- logo -->
	  <image class="round" src="/src/static/logo.png" style="width: 200rpx;height: 200rpx;margin: 50rpx 225rpx;" mode=""></image>
	  <view class="flex align-center" style="flex-direction: column;">
		  <!-- 手机号渲染 -->
	  	<text style="font-size: 50rpx;">{{saveStore.userInfo?.phone ? saveStore.userInfo?.phone : '你还未注册'}}</text>
		<text style="font-size: 24rpx; color: #CACECB; margin-top: 10rpx;">中国移动提供认证服务</text>
		<!-- 登入按钮 -->
		<button style="background-color: #2DD296; color: #FFFFFF;width: 500rpx;margin-top: 30rpx; border-radius: 30rpx;" @click="toMain">本机号码一键登录</button>
		<!-- 协议 -->
		<view class="flex justify-around align-center padding" style="margin-top: 60rpx;width: 650rpx; margin-left: 50rpx;">
			<label>
				<checkbox borderColor="#2DD296" activeBackgroundColor="#2DD296" iconColor="#fff" :check="false" @click="isCheck"/>
			</label>
			<text style="font-size: 22rpx;color: #BAC0BC;margin-left: 20rpx;padding-right: 50rpx;">
				登录即同意<text style="color: #37D59D;">用户协议</text>、<text style="color: #37D59D;">隐私政策</text>和<text style="color: #37D59D;">中国移动认证服务条款</text>且授权使用本机号码登录
			</text>
		</view>
	  </view>
  </view>
</uni-popup>

<!-- 其他方式登录点击后跳转 -->
<uni-popup ref="popupOtherWay" type="bottom" mask-background-color="rgba(0,0,0,0)">
	<view class="other">
		<!-- 大标题 -->
		<text class="flex justify-start" style="font-size: 50rpx; font-weight: 500;color: #1B3125; padding: 70rpx;">开启及游册</text>
		<!-- 输入框 -->
		<view class="inputView flex justify-center" style="width: 100%;">
			<input v-model="phoneInput" placeholder="请输入手机号" selection-start="5" placeholder-style="color:#919C94;"/>
		</view>
		<!-- 协议部分 -->
		<view class="flex justify-start align-center" style="margin-top: 50rpx; margin-left: 80rpx;">
			<label>
				<checkbox borderColor="#B2BDB7" backgroundColor="#F4FAF8" activeBackgroundColor="#2DD296" iconColor="#F4FAF8" :check="false" @click="isCheck"/>
			</label>
			<text style="font-size: 25rpx; color: #919C94; margin-left: 25rpx;">我已阅读并同意<text style="color: #37D59D;">用户协议</text>及<text style="color: #37D59D;">隐私政策</text></text>
		</view>
		<!-- 三个业务按钮 -->
		<view class="">
			<view class="flex justify-center" style="margin-top: 30upx;" >
				<button 
					style="color: white; width: 450rpx;height: 80upx; background-color: #2DD296; border-radius: 30rpx;"
					class="cu-btn xl  text-xl" @click="handleRegister"
				>
					注册
				</button>
			</view>
			<view class="flex justify-center" style="margin-top: 30upx;" >
				<button 
					style="color: #2DD296; width: 450rpx;height: 80upx; background-color: #E0F5EE; border-radius: 30rpx;"
					class="cu-btn xl   text-xl" @click="passwordLogin"
				>
					使用密码登录
				</button>
			</view>
			
			<view class="flex justify-center" style="margin-top: 30upx;" >
				<button 
					style="color: #2DD296; width: 450rpx;height: 80upx;background-color: #F4FAF8; border-radius: 30rpx;"
					class="cu-btn xl text-xl" @click="closeFastLogin"
				>
					返回一键登录
				</button>
			</view>
		</view>
	</view>
</uni-popup>
<!-- 密码登录 -->
<uni-popup ref="popupPsdLogin" type="bottom" mask-background-color="rgba(0,0,0,0)">
	<view class="password">
		<!-- 大标题 -->
		<text class="flex justify-start" style="font-size: 50rpx; font-weight: 500;color: #1B3125; padding: 70rpx;">开启及游册</text>
		<!-- 输入框 -->
		<view class="inputView flex justify-center" style="width: 100%;">
			<input v-model="phoneInput" placeholder="请输入手机号" selection-start="5" placeholder-style="color:#919C94;"/>
		</view>
		<view class="inputView flex justify-center" style="width: 100%; margin-top: 20rpx;">
			<input v-model="passwordInput" placeholder="请输入密码" selection-start="5" placeholder-style="color:#919C94;" password="true"/>
		</view>
		<!-- 协议部分 -->
		<view class="flex justify-start align-center" style="margin-top: 50rpx; margin-left: 80rpx;">
			<label>
				<checkbox borderColor="#B2BDB7" backgroundColor="#F4FAF8" activeBackgroundColor="#2DD296" iconColor="#F4FAF8" :check="false" @click="isCheck"/>
			</label>
			<text style="font-size: 25rpx; color: #919C94; margin-left: 25rpx;">我已阅读并同意<text style="color: #37D59D;">用户协议</text>及<text style="color: #37D59D;">隐私政策</text></text>
		</view>
		<!-- 两个业务按钮 -->
		<view class="">
			<view class="flex justify-center" style="margin-top: 30upx;" >
				<button 
					style="color: white; width: 450rpx;height: 80upx; background-color: #2DD296; border-radius: 30rpx;"
					class="cu-btn xl  text-xl" @click="handlelogin"
				>
					登录
				</button>
			</view>
			<view class="flex justify-center" style="margin-top: 30upx;" >
				<button 
					style="color: #2DD296; width: 450rpx;height: 80upx;background-color: #F4FAF8; border-radius: 30rpx;"
					class="cu-btn xl text-xl" @click="closeFastLogin"
				>
					返回一键登录
				</button>
			</view>
		</view>
	</view>
</uni-popup>
</template>

<script setup lang="ts">
import { useSave } from '../../store/index' // 导入用户信息状态机
import type { UserInfo } from '../../model/users' // 导入用户信息接口
import { ref, type Ref } from 'vue';
import http from '@/utils/http';
import {userRegister, checkUserExists} from '@/api/user_api';
//调用 useSave 函数获取状态机实例
const saveStore = useSave()
//加密手机号
saveStore.encryptedPhone()

// 控制弹窗显示/隐藏的状态
const popup = ref(null);
const popupOtherWay = ref(null);
//控制是否同意协议
const check = ref<boolean>(false)


//勾选协议后可正常登入
const isCheck=()=>{
	check.value = true
}

// 一键登录函数，触发弹窗显示
const fastLogin=()=>{
	if(saveStore.userInfo===null){
		uni.showToast({
			title:'您还未注册，请先注册',
			duration:2000,
			icon:'none'
		})
		otherLogin()
		return
	}
	(popup.value as any)?.open()
}
//返回一键登录页面
const closeFastLogin=()=>{
	// console.log('关闭其他方式登录弹窗');
	(popupOtherWay.value as any)?.close()
}
//其他方式登录函数
const otherLogin=()=>{
	(popupOtherWay.value as any)?.open()
}

//登录跳转
const toMain= async ()=>{
	if(check.value===false){
		uni.showToast({
			title:'请阅读并同意相关政策',
			duration:2000,
			icon:'none'
		})
		return
	}
	uni.navigateTo({
		url:'/pages/main/main'
	})
}
//注册
const phoneInput:Ref<string> = ref('')// 手机号输入框的值
let name:Ref<string> = ref('')//名字
const passwordInput:Ref<string> = ref('')//密码
const avatar:Ref<string> = ref('')//头像

const handleRegister = async ()=>{
	if(check.value===false){
		uni.showToast({
			title:'请阅读并同意相关政策',
			duration:2000,
			icon:'none'
		})
		return
	}
	// 获取输入框的值
	console.log('输入的手机号:', phoneInput.value);
	// 简单的手机号验证
	if(!phoneInput.value || phoneInput.value.length !== 11){
		uni.showToast({
			title:'请输入有效的手机号',
			duration:2000,
			icon:'none'
		})
		return;
	}

	// 检查用户是否已注册
	try {
		const existRes = await checkUserExists(phoneInput.value);
		console.log(existRes);
		// console.log(existRes.data.results[0].phone);
		if (existRes.data && existRes.data.results && existRes.data.results.length > 0) {
			uni.showToast({
				title:'该手机号已注册，请直接登录',
				duration:2000,
				icon:'none'
			})
			return;
		}
	} catch (error) {
		console.error('检查用户是否存在失败:', error);
		uni.showToast({
			title:'系统繁忙，请稍后再试',
			duration:2000,
			icon:'none'
		})
		return;
	}

	//设置默认值
	name.value = '游客'+phoneInput.value.slice(7)
	let res = await userRegister(phoneInput.value,avatar.value,name.value,passwordInput.value)
	console.log('注册结果:', res);
	
	//清除状态机中的数据
	saveStore.userInfo = null
	// 将用户数据存入状态机
	if (res.statusCode === 201 && res.data) {
    // 构建用户信息对象，结合请求数据和响应数据
    const userInfo: UserInfo = {
      objectId: res.data.objectId,
      createdAt: res.data.createdAt,
      phone: res.config?.data?.phone || '',
      username: res.config?.data?.username || '',
      avatar: res.config?.data?.avatar || '',
	  password:res.config?.data?.password || ''
    }
    saveStore.userInfo = userInfo
    console.log('用户数据已存入状态机:', saveStore.userInfo)
  }
	uni.navigateTo({
		url:'/pages/main/main'
	})
}


// 控制是否展开
const popupPsdLogin = ref((null));
//密码登录函数
const passwordLogin=()=>{
	(popupPsdLogin.value as any)?.open()
}

//登录功能
const handlelogin = async ()=>{
	if(check.value===false){
		uni.showToast({
			title:'请阅读并同意相关政策',
			duration:2000,
			icon:'none'
		})
		return
	}
	// 获取输入框的值
	console.log('输入的手机号:', phoneInput.value);
	const existRes = await checkUserExists(phoneInput.value);
	console.log(existRes);
	console.log(existRes.data.results[0].password);//密码
	console.log(saveStore.userInfo);
	// 简单的手机号验证
	if(!phoneInput.value || phoneInput.value.length !== 11){
		uni.showToast({
			title:'请输入有效的手机号',
			duration:2000,
			icon:'none'
		})
		return;
	}else if(existRes.data.results[0].password===''){//没有设置密码的情况
		uni.showToast({
			title:'手机号未设置密码，请使用一键登录',
			duration:2000,
			icon:'none'
		})
		return;
	}
	console.log('输入的密码',passwordInput.value);
	//密码不为空
	if(!passwordInput.value){
		uni.showToast({
			title:'密码不能为空',
			duration:2000,
			icon:'none'
		})
		return;
	} 
	if(passwordInput.value === existRes.data.results[0].password){
		uni.showToast({
			title:'登录成功',
			duration:2000,
			icon:'none'
		})
		//清除状态机中的数据
			saveStore.userInfo = null
			// 将用户数据存入状态机
			if (existRes.statusCode === 200 && existRes.data) {
		  // 构建用户信息对象，结合请求数据和响应数据
		  const userInfo: UserInfo = {
		    objectId: existRes.data.results[0].objectId,
		    createdAt: existRes.data.results[0].createdAt,
		    phone: existRes.data.results[0].phone || '',
		    username: existRes.data.results[0].username || '',
		    avatar: existRes.data.results[0].avatar || '',
			password:existRes.data.results[0].password || ''
		  }
		  saveStore.userInfo = userInfo
		  console.log('用户数据已存入状态机:', saveStore.userInfo)
		}
		uni.reLaunch({
			url:'/pages/main/main'
		})
	}
	
}
//返回一键登录页面
const closePasswordLogin=()=>{
	// console.log('关闭其他方式登录弹窗');
	(popupPsdLogin.value as any)?.close()
}

</script>

<style lang="scss">
.down{
	height: 2000rpx;
	background: linear-gradient(to bottom, rgba(244,250,248,0) 0%, rgba(244,250,248,1) 3%,rgba(244,250,248,1)100%);
	margin-top: -80rpx;
}
.btn{
	background-color: #2DD296;
	color: white;
	border-radius: 50rpx;
	height:100rpx; 
	width: 700rpx;
	box-shadow:5rpx 5px 50rpx rgba(50,187,136, 0.5);
}
.box{
	background-color: #FFFFFF;
	width: 650rpx;
	height: 700rpx;
	border-radius: 50rpx;
}
.other{
	height: 1250upx;
	background: linear-gradient(to bottom, rgba(244,250,248,0) 0%, rgba(244,250,248,1) 10%,rgba(244,250,248,1)100%)
}
.password{
	height: 1250upx;
	background: linear-gradient(to bottom, rgba(244,250,248,0) 0%, rgba(244,250,248,1) 10%,rgba(244,250,248,1)100%)
	
}
.inputView{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 500rpx;
	height: 100rpx;
}
input{
	background-color: white; 
	width: 650rpx;
	height: 110rpx; 
	border-radius: 40rpx;
	box-shadow: 0 0 15px rgba(145,156,150, 0.2);;
	padding-left: 50upx;
}
</style>
